INTERNET aτ²lal² beri, PC World Online'a koydu≡umuz Misafir Defteri'ne b²rakt²≡²n²z mesajlar, kendi Web sitenizi tasarlamaya ne kadar hevesli oldu≡unuzu aτ²kτa g÷steriyor. Bizi arad²n²z, mesajlar b²rakt²n²z, deneyimlerimizden yararlanarak kendi Web sayfalar²n²z² tasarlamakta yard²mc² olacak bilgiler istediniz.

▌■te biz de isteklerinizi k²rm²yor ve bu say²dan itibaren bir Internet gezgininin kendi sayfalar²n² tasarlayarak Web'de nas²l aktif rol alabilece≡ini aτ²klayan yaz²lar²m²za ba■l²yoruz.

Bir Web sayfas² tasarlaman²n yolu HTML dilini bilmekten geτiyor. Elbette Microsoft'un Ofis programlar² iτin geli■tirdi≡i Internet Asistanlar², Web sayfas² tasarlamak iτin onlarca pratik program var, ancak HTML kodlar²n² bilmiyorsan²z, herhangi bir tasar²m problemi ile kar■²la■²nca tak²l²p kalabilirsiniz. Tabii, Java, Java Script, ActiveX, PERL gibi ileri seviye Web programc²l²≡²na y÷nelik araτlar da var.

Bu sayfalarda temelden ba■layarak hepsi hakk²nda bilgiler verece≡iz. Bunlar²n aras²nda grafik tasar²mlar²n²z² verimli ve etkin bir biτimde yapman²z², sayfalar²n²za eri■im h²z²n²z² yⁿkseltmek iτin grafikleri kⁿτⁿltmenizi sa≡layacak pⁿf noktalar² da olacak. HTML kodlar²na ve di≡er teknik detaylara girmeden ÷nce, Internet ⁿzerinde bir Web sayfas² nas²l edinece≡inizi anlatarak yaz²m²za ba■lamak istiyoruz.

Daha sonra HTML dilinin nas²l kullan²laca≡²na ili■kin bir giri■ yapaca≡²z. ▌lerki aylarda ise PC World Online'²n webmaster'lar² Cenk Tarhan ve Deyvi Levitas size i■in teknik detaylar²n² anlatmaya devam edecekler.

WEB'DE NASIL YER ALIRIM?

▌kinci seτenek yine genelde firmalara y÷nelik. Yani, Tⁿrk Telekom'a ba■vurup bir kiral²k hat (leased line) arac²l²≡² ile Web sayfalar²n²z² kendi Web sunucunuz ⁿzerinden yay²nlamak veya Web sunucunuzu bir ISS'ye yerle■tirip buradan yay²n yapmak. Ku■kusuz bu seτenekler iτinde bir ISS'nin sunucusundan - kiralad²≡²n²z yerin MB cinsinden bⁿyⁿklⁿ≡ⁿne g÷re ⁿcret ÷deyerek - yer kiralamak en ucuzu. Bunun kar■²l²≡²nda Web sayfalar²n²za kar■²l²k gelecek bir Web adresi (URL) ediniyorsunuz. Bu adres ISS'nizin ismi ile ba■lay²p kendi sitenizin ismi ile devam edebilece≡i gibi (÷rne≡in http://www.iss.com.tr/benimsitem), ISS'nizle yapt²≡²n²z anla■maya g÷re tamamen kendi verdi≡iniz isim de olabilir (÷rne≡in http://www.benimsitem.com.tr).

Elbette ISS'ler belirli bir ⁿcret kar■²l²≡² Web sayfalar²n²z² tasarlayabilirler, ancak burada amac²m²z kendi Web sayfalar²n²z² tasarlamay² ÷≡retmek oldu≡una g÷re sayfalar²n²z² kendinizin tasarlayaca≡²n²z² ve ISS'nizin sunucusuna yapt²≡²n²z anla■maya g÷re belirli zamanlarda modem ile ' upload' edece≡inizi varsay²yoruz.Buraya kadar ticari anlamda bir Web sitesi kurmak iτin neler yapabilece≡inizi aτ²klad²k, ancak yaz²m²z daha τok amat÷rlere y÷nelik oldu≡u iτin size ⁿcretsiz alternatiflerden haberdar etmek de boynumuzun borcu. Tⁿrkiye'de baz² ISS'lerin Internet eri■imi iτin hesap aτt²rd²≡²n²zda size ⁿcretsiz bir Web sayfas² alan² sa≡lad²klar²n² s÷ylemi■tik. Yurtd²■²nda hesab² olsun olmas²n herkese Web sayfalar²n² yay²nlamak iτin ⁿcretsiz belirli bir alan aτan ISS'ler de var.

╓rne≡in ABD'de faaliyet g÷steren Geocities (http://www.geocities.com/homestead/) herkese 2MB'l²k bir Web sayfas² alan² aτ²yor. Internet'te s÷rf yaparken ku■kusuz bu tⁿr ba■ka promosyonlarla da kar■²la■abilirsiniz. Haz²rlad²≡²n²z sayfalar² bir FTP client program² ile (÷rne≡in ws_ftp) bu sitelere ' upload' edebiliyorsunuz. Yine de bu hizmetin sⁿreklili≡i konusunda emin olamazs²n²z. Bu yⁿzden Web sunucusunda yer aτan bir ISS bulman²z² ÷neririz.

WEB SAYFASI TASARIMIN TEMELLER▌

Web'de yay²nlanmak ⁿzere belgeler haz²rlarken, HTML kodlar² ile metinlerinize verece≡iniz biτimler belirteτ (▌ngilizce ad² ile mark-up veya tag) ad²n² ta■²r. Bunlar metnin τe■itli yerlerinde, ' <' ve ' >' ■eklindeki parantezlerin aras²na yerle■tirilen kodlard²r. Bunlar aras²nda di≡er Internet sayfalar²na (veya URL'lere) geτi■i sa≡layan ælink'ler de bulunabilir.HTML bir dil olarak adland²r²lsa da, HTML belgelerinin (k²saca Web sayfalar²n²n) haz²rlanmas² klasik bilgisayar dilleri ile programlama yapmaya pek benzemez. Daha τok kelime i■lemcilerle τal²■maya benzer. Ancak burada yaz²tipi bⁿyⁿklⁿ≡ⁿnⁿ ayarlamak, bir metni kal²n veya italik yapmak iτin menⁿ komutlar²n² kullanmaz, bunlar² metnin ba■²na ve sonuna koydu≡unuz kodlarla belirlersiniz. (WordPerfect ile τal²■anlar bunu kolayca anlayacakt²r, τⁿnkⁿ bu kelime i■lemcide yazd²≡²n²z metinlerin biτim kodlar²n² da Reveal Codes komutu ile g÷rⁿntⁿleyebilirsiniz.) Metni ve bu kodlar² nerede yazaca≡²z diyorsan²z, ba■lang²τta (hatta PC World Online'n²n webmaster'lar²na sorarsan²z her zaman) Windows'un Not Defteri fazlas²yla yeterli olacakt²r.

Bu k²sa giri■ten sonra bir ÷rnek ile HTML kodlar²n² kullanmaya ba■layal²m. Diyelim ki elimizde ■÷yle bir metin var:

Dⁿ■ⁿnde bile g÷remez i■ler,
Dⁿ■lerin g÷rdⁿ≡ⁿ i■leri.

<B>Dⁿ■ⁿnde</B> bile g÷remez,
<B>i■ler</B>,<BR><B>Dⁿ■lerin</B> g÷rdⁿ≡ⁿ <B>i■leri</B>.<BR>

Web browser'da a■a≡²daki gibi bir g÷rⁿntⁿ elde ederiz:
Dⁿ■ⁿnde bile g÷remez i■ler,

Dⁿ■lerin g÷rdⁿ≡ⁿ i■leri.

Bu ÷rnekte <B> ve </B> belirteτleri Web browser'a aralar²ndaki metni kal²n (bold) g÷stermesini s÷yler. <BR> belirteci ise sat²r ba■² verilmesi gerekti≡ini. Bunlar gibi ba■ka pek τok belirteτ var ama gⁿzel bir Web sayfas² tasarlamak iτin ba■lang²τta ÷≡renmeniz gereken belirteτ say²s² 30-40 kadard²r. Profesyonelle■tikτe yeni belirteτler kullanmaya ba■layabilirsiniz.

Bir de yazd²klar²n²z²n dⁿzgⁿn g÷rⁿnmesi iτin her html dosyas²n²n ba■²nda:<html> <head> <title> </title> </head><body>

sonunda:

</body></html>

belirteτlerinin bulunmas²na dikkat edin. Bunlar sayfan²n ba■²n² sonunu belirlemek iτin gerekli belirteτlerdir. Koymazsan²z, Web browser'²n²zda metin belirteτleri ile birlikte g÷rⁿnebilir.Bu ÷rnekteki belirteτleri kendiniz denemek istiyorsan²z, Not Defteri'ne istedi≡iniz metni bu belirteτleri kullanarak girin. Belgeye bir isim ve htm soyad²n² (Windows 95'te html soyad²n² da kullanabilirsiniz) vererek kaydedin. Sisteminize bir Web browser yⁿklⁿ ise htm soyadl² bu belgenin ⁿzerine τift t²klad²≡²n²zda browser aτ²lacak ve metniniz biτimlendirilmi■ haliyle ekrana geelcek.

HAYD▌ B▌R WEB SAYFASI YAPALIM

<title> ve </title>

tag'lar² aras²na yazaca≡²n²z metin web sayfas²n²n ba■l²≡² olarak g÷rⁿntⁿlenecektir. <title> tag'² a■a≡²daki gibi kullan²l²r. <title>Bu benim ilk denemem!</title>Web sayfalar²n²n arka plan²n² da istedi≡iniz gibi ayarlayabilirsiniz. Bu a■amada iki adet seτene≡iniz var. Birincisi bo■ bir arka plan kullanarak bu arka plan²n rengini ayarlamak, ikincisi ise bir resim dosyas²ndaki resmi al²p web sayfas²n²n arka plan²na ' d÷■emek'. Bu i■lemi aynen Windows 95'in masaⁿstⁿndeki duvar ka≡²d²na benzetebiliriz. ╓nce bo■ bir arka plan² renklendirmeyi g÷relim. Web sayfas²n²n arka plan²n²n rengi <body> tag'²n² kullanarak de≡i■tirilir. Default arka plan rengi gridir. Arka plan rengini ÷rne≡in beyaz yapmak iτin body tag'²n²

<body bgcolor='white'>veya <body bgcolor='#FFFFFF'>

■eklinde kullanabilirsiniz. Birinci seτenekte rengin ▌ngilizce ismi, ikinci seτenekte ise ayn² rengin RGB cinsinden renk kodu hexadecimal (onalt²l² say² sistemi) olarak verilmektedir. Eski tarihli browser'lar renk isimlerini alg²layamazlar, bu yⁿzden sayfalar²n²zda renklerin onalt²l² say² sistemi kodlar²n² kullanmak daha hay²rl²d²r. Yan tarafta g÷rdⁿ≡ⁿnⁿz tabloda, web sayfalar²n²n arka planlar²nda kullan²labilecek olan temel renkler isim ve say² kodu olarak listelenmi■tir. Onalt²l² say²lar²n RGB kombinasyonlar² ile oynayarak istedi≡iniz rengi web sayfas² arka plan rengi olarak belirleyebilirsiniz.

Bir Web sayfas²n²n arka plan²na bir resim d÷■eyebilirsiniz. Bu i■lem iτin ilk ÷nce elinizde bir resim dosyas² olmas² gerekir. Web sayfalar²nda kullan²labilecek bⁿtⁿn resimler JPG veya GIF format²nda olmal²d²r. Web okulunu haz²rlarken elinizde bir resim dⁿzenleme program²n²n oldu≡unu ve JPG veya GIF format²ndaki dosyalarla τal²■may² bildi≡inizi varsay²yoruz. ╓rne≡in elimizde arka.gif diye bir resim olsun. Bu resmi web sayfas²n²n arka plan²na d÷■emek iτin yine <body> tag'²n² kullanaca≡²z. ARKA.GIF ad²ndaki bir resmi web sayfas²n²n arkas²na d÷■emek iτin <body> tag'²n² a■a≡²daki gibi

<body background=' arka.gif'>

kullanmal²s²n²z. Bu a■amada ARKA.GIF dosyas²n²n, HTM dosyas² ile ayn² klas÷rde yer almas² gereklidir. ╓rnek bir resim d÷■emesi a■a≡²daki resimde g÷sterilmi■tir. Bu a■amada bir web sayfas²n²n arka plan²nda bir resim d÷■edi≡inizde, arka plan rengi kullanmaya gerek kalmad²≡² gibi bir hisse kap²l²rs²n²z, yan²l²rs²n²z. Genelde Internet yava■ bir ■ey oldu≡u iτin, τo≡u kullan²c² s÷rf yaparken resimleri kapatma yoluna gidiyorlar. B÷yle olunca arka plana d÷■enmi■ resimler g÷rⁿnmeyecek, arka plan rengi de default olarak gri oldu≡u iτin sizin hiτ dⁿ■ⁿnmedi≡iniz bir web sayfas² ortaya τ²kabilecektir. Bu yⁿzden size tavsiyemiz, arka plan grafi≡i kulland²≡²n²zda arka planda kulland²≡²n²z resme uygun bir arka plan rengini de <body> tag'²n²n iτinde belirtmenizdir. ▌ki belirteτ bir tag iτerisinde kullan²labilir. Ve resmiler kapat²ld²≡²nda web taray²c²s² otomatik olarak belirtilen arka plan rengini web sayfas²na uygulayacakt²r. Sar² iτerikli bir arka plan resmi ile kullan²lmas² gereken <body> tag'² a■a≡²da g÷sterilmi■tir.

<body background=' arka.gif' bgcolor='#ffff00'>

Ad²m 2. Web sayfas²n²n metin iτeri≡i. Web sayfalar²nda aynen kitap veya dergi sayfalar²nda oldu≡u gibi metinler ve resimler kullan²labilir. 2. Ad²mda web sayfalar²nda metinlerin kullan²m²na de≡inece≡iz. Web sayfalar²nda metinler aynen Word veya benzeri bir kelime i■lemci programda oldu≡u gibi bold, italik vs.. ■eklinde formatlanabilir, font tipi, rengi ve boyutu ayarlanabilir. Web sayfas²n²n iτerisine yazd²≡²n²z metin web taray²c²s²n²n geni■li≡i boyunca yaz²l²r, artan k²s²m otomatik olarak alt sat²ra at²l²r. ╓rne≡in a■a≡²daki gibi bir metnimiz olsun.

Merhaba. Bu benim ilk web sayfas² denemem. Yazd²≡²m metni bold, italik, veya altτizgili olarak g÷rⁿntⁿlemek istiyorum.

Bu metni web sayfas²na girdi≡inizde a■a≡²daki gibi bir ekran g÷rⁿntⁿsⁿ ile kar■²la■acaks²n²z. ▐imdi bu metni formatlamaya ba■layal²m. ╓ncelikle merhaba k²sm²n² bⁿyⁿk yapmak laz²m. Bunun iτin de <hx> tag'²n² kullanaca≡²z. Bu tag'da x yerine birden 6'ya kadar numara verebilirsiniz. 1 en bⁿyⁿk boyut, 6 en kⁿτⁿk boyuttur. Denemeyle sabittir, 1 ile 4 aras²nda rakamlar kullanmak en iyisidir. ▐imdi merhaba yaz²s²n² bⁿyⁿtmek iτin onu <h1> tag'²na alal²m.

<h1>Merhaba</h1>

Burada, <h1> ile </h1> aras²ndaki metin, bⁿyⁿltⁿlecektir. A■a≡²daki resimde merhaba tag'² de≡i■ik <hx> boyutlar²nda kullan²lm²■t²r. B÷ylece merhaba yaz²s²n² istedi≡imiz gibi bⁿyⁿttⁿk. <hx> tag'²n² kullan²rken ÷≡rendi≡imiz bir ikinci ■ey ise metin formatlamas²n²n nas²l yap²ld²≡². Demek ki, bir tag'²n formatlamas² iki tag aras²na (<h1> ile aτ²l²■, </h1> ile kapan²■) ald²≡²m²z metne uygulan²yor. ▐imdi h²zl² bir biτimde di≡er metin tag'lar²n² inceleyelelim.

<b> </b> aradaki metni bold (kal²n) yapar

<i> </i> aradaki metni italik yapar

<u> </u> aradaki metnin alt²n² τizer

Bu tⁿr metin formatlama tag'lar² birbirlerinin iτinde kullan²labilirler. ╓rne≡in bir metin parτas²n² hem bold hem de italik yapmak iτin <b><i> ..... </i></b>

formatlamas²n² kullanmak gerekecektir. ╓zgⁿn metnimize geri d÷nelim. Bu metinde ad² geτen formatlamalar² uygulad²≡²m²zda HTML sayfam²zdaki metin a■a≡²daki gibi olacakt²r.

<h1>Merhaba. </h1>Bu benim ilk web sayfas² denemem. Yazd²≡²m metni <b>bold</b>, <i>italik</i>, veya <u>altτizgili</u> olarak g÷rⁿntⁿlemek istiyorum.

B÷yle bir formatlama yap²ld²≡²nda elde edilecek olan web sayfas² g÷rⁿntⁿsⁿ a■a≡²daki gibidir. Metin parτalar²n² web sayfas²nda g÷rⁿntⁿlerken paragraf ba■² ve sat²r sonunu da elle i■aretlemek zorundas²n²z yoksa metin otomatik olarak alta kayd²r²lacakt²r. Burada kar■²m²za iki adet tag τ²k²yor. Bunlardan birincisi <br>, ikincisi de <p> tag'². Birincisi sat²r sonu, ikincisi ise paragraf ba■² anlam²na geliyor. S÷z konusu metinde ' Bu benim ilk web sayfas² denemem' yaz²s²ndan sonra bir sat²r sonu yani <enter> verelim. Ayr²ca paragraf ba■²n² denemek iτin de ' bold, italik, veya altτizgili' metnini yeni bir paragraftan ba■latal²m. Bu durumda kullanaca≡²m²z formatlama a■a≡²daki gibi olacakt²r. <h1>Merhaba. </h1>Bu benim ilk web sayfas² denemem. <br>Yazd²≡²m metni <p><b>bold</b>, <i>italik</i>, veya <u>altτizgili</u> <p>olarak g÷rⁿntⁿlemek istiyorum.Dikkat ederseniz, <p> yani paragraf ba■² tag'²n²n kullan²ld²≡² yerlerde <br> yani sat²r sonu kullanm²yoruz. ╟ⁿnkⁿ paragraf ba■² tag'² zaten sat²r sonunu da belirlemektedir. Yukar²daki ÷rnekte kullan²lan tag'laman²n ekranda g÷sterece≡i sonuτ a■a≡²dad²r. Son olarak HTML sayfalar²nda enter tu■unu kullanman²n web sayfas²n²n g÷rⁿnⁿmⁿne bir etkisi olmad²≡²n² s÷yleyelim. Web sayfalar²n²n ekranda g÷rⁿnⁿmⁿnde sat²r sonlar², sat²r aralar² ve paragraf ba■lar² tamamen tag'lar ile belirlenir. Bu yⁿzden metin dosyas²nda enter kullanman²n web sayfas²na herhangi bir etkisi yoktur. Ancak web sayfas²n² dⁿzenlerken her ■eyin derli toplu g÷zⁿkebilmesi iτin bu tⁿr bir enter'lama yapabilirsiniz. Gelecek say²m²zda metin formatlarken renk ve font kullanmay², <pre> tag'²n²n ne i■e yarad²≡²n², metinlerin bir liste halinde nas²l alt alta s²ralanaca≡²n² g÷recek ve web sayfalar²nda resim kullan²m²na giri■ yapaca≡²z. n